<!doctype html>
<html>
<head>
    <title>jsPlumb 1.7.5 demo - jQuery</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="../../css/jsplumb.css">
    <link rel="stylesheet" href="demo.css">
</head>
<body data-demo-id="statemachine" data-library="jquery">
<div id="headerWrapper">
    <div id="header">
        <div class="logo"><img src="../../logo-bw.png"></div>
        <div class="menu">
            <a href="http://localhost:4567">DOCS</a>
            <a href="../../apidocs/">API</a>
            <a href="../../tests/index.html">TESTS</a>
            <a href="mailto:hello@jsplumbtoolkit.com">CONTACT</a>
            <a href="http://github.com/sporritt/jsplumb/">GITHUB</a>
            <a href="https://groups.google.com/forum/?fromgroups#!forum/jsplumb">DISCUSS</a>
            <a href="https://github.com/sporritt/jsPlumb/issues">ISSUES</a>
        </div>
    </div>
</div>

<iframe id="like"
        src="http://www.facebook.com/widgets/like.php?href=http://jsplumb.com&amp;layout=button_count"></iframe>

<div id="retweet_button">
    <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://jsplumb.org"
       data-text="jsPlumb - visually connect DOM elements." data-count="horizontal" data-via="jsPlumb">Tweet</a>
    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
<div id="main">
    <!-- demo -->
    <div class="demo statemachine-demo" id="statemachine-demo">
        <div class="w" id="opened">BEGIN
            <div class="ep"></div>
        </div>
        <div class="w" id="phone1">PHONE INTERVIEW 1
            <div class="ep"></div>
        </div>
        <div class="w" id="phone2">PHONE INTERVIEW 2
            <div class="ep"></div>
        </div>
        <div class="w" id="inperson">IN PERSON
            <div class="ep"></div>
        </div>
        <div class="w" id="rejected">REJECTED
            <div class="ep"></div>
        </div>
    </div>
    <!-- /demo -->
</div>
<!-- explanation -->
<div class="explanation">
    <h4>STATE MACHINE</h4>
    <p>Nodes are connected with the StateMachine connector.</p>
    <p>Endpoints are located with 'Continuous' anchors, which are anchors whose location is calculated based on
        the location of all other connected elements, and which guarantee a unique endpoint per connection.
    </p>
    <p>Click and drag new Connections from the orange div in each element; the main elements in the UI are
        configured to be Connection targets. You can drag from one of these divs onto its parent element to
        create a 'loopback' connection. Each element supports up to 5 Connections.</p>
    <p>Click on a Connection to delete it.</p>
</div>
<!-- /explanation -->

<script src="../../external/jquery-1.9.0-min.js"></script>
<script src="../../external/jquery-ui-1.9.2.min.js"></script>
<script src="../../external/jquery.ui.touch-punch-0.2.2.min.js"></script>

<!-- JS -->
<!-- support lib for bezier stuff -->
<script src="../../lib/jsBezier-0.7.js"></script>
<!-- event adapter -->
<script src="../../lib/mottle-0.6.js"></script>
<!-- geom functions -->
<script src="../../lib/biltong-0.2.js"></script>
<!-- jsplumb util -->
<script src="../../src/util.js"></script>
<script src="../../src/browser-util.js"></script>
<!-- main jsplumb engine -->
<script src="../../src/jsPlumb.js"></script>
<!-- base DOM adapter -->
<script src="../../src/dom-adapter.js"></script>
<script src="../../src/overlay-component.js"></script>
<!-- endpoint -->
<script src="../../src/endpoint.js"></script>
<!-- connection -->
<script src="../../src/connection.js"></script>
<!-- anchors -->
<script src="../../src/anchors.js"></script>
<!-- connectors, endpoint and overlays  -->
<script src="../../src/defaults.js"></script>
<!-- bezier connectors -->
<script src="../../src/connectors-bezier.js"></script>
<!-- state machine connectors -->
<script src="../../src/connectors-statemachine.js"></script>
<!-- flowchart connectors -->
<script src="../../src/connectors-flowchart.js"></script>
<script src="../../src/connector-editors.js"></script>
<!-- SVG renderer -->
<script src="../../src/renderers-svg.js"></script>


<!-- vml renderer -->
<script src="../../src/renderers-vml.js"></script>

<!-- common adapter -->
<script src="../../src/base-library-adapter.js"></script>
<!-- jquery jsPlumb adapter -->
<script src="../../src/jquery.jsPlumb.js"></script>
<!-- /JS -->

<!--  demo code -->
<script src="demo.js"></script>

<script src="../demo-list.js"></script>
</body>
</html>
